<template>
	<view class="favorites-page bgimg1">
		<u-navbar :title="$t('hhh.t175')" :autoBack="false" :bgColor="scrollTop > 20?'#110124':'transparent'"
			leftIconColor="#ffffff" :titleStyle="{'color':'#ffffff'}" @leftClick="leftClick"></u-navbar>
		<u-gap height="150" bgColor="transparent"></u-gap>



		<block v-for="(item,index) in dataList" :key="index">
			<view class="cart_item bgF3F5FA rounded-lg p-2 flex align-center mb-2 flex-1 mx-3">
				<image class="rounded" :src="item.peipei.heading" mode="aspectFill" style="width: 176rpx;height: 176rpx;"
					@tap="navTo(`/pages/playerhome/playerhome?id=${item.peipei_id}`)">
				</image>
				<view class="flex flex-column flex-1 ml-2">
					<view class="flex align-center" @tap="navTo(`/pages/playerhome/playerhome?id=${item.peipei_id}`)">
						<text class="fs-32 text-black font-weight-light">{{item.peipei.nickname}}</text>
						<image src="/static/imgs/renzheng.png" mode="aspectFill" class="w-32 h-32 ml-1"
							v-if="item.peipei.is_verified === 1">
						</image>
						<image v-if="item.peipei.nationality && item.peipei.nationality.logo" :src="item.peipei.nationality.logo"
							mode="aspectFill" class="w-32 h-32 ml-1 rounded-circle flex-shrink"></image>
						<view class="flex align-center bgFF4CBE rounded-circle px-1 ml-1">
							<image :src="`/static/imgs/${item.peipei.gender === 2?'sex':'sex1'}.png`" mode="aspectFill"
								style="width: 20rpx;height: 20rpx;"></image>
							<text class="text-white fs-20">{{item.peipei.age}}</text>
						</view>
						<view class="flex align-center flex-1 justify-end">
							<image src="/static/imgs/hot_icon.png" mode="aspectFill" class="w-36 h-36"></image>
							<text class="ftFF685E fs-26 font-weight-light">{{abbreviateNumber(item.peipei.fire_balance)}}</text>
						</view>
					</view>
					<view class="flex align-center mt-2" @tap="navTo(`/pages/playerhome/playerhome?id=${item.peipei_id}`)">
						<view class="rounded px-1 py-1 bgD5EDF8 flex align-center mr-1" v-for="(obj,index) in item.peipei.interests"
							:key="index">
							<image :src="obj.icon" mode="aspectFill" class="w-32 h-32"></image>
							<text class="ft666666 fs-22 ml-1">{{obj.name}}</text>
						</view>
					</view>
					<view class="flex align-center justify-between mt-3">
						<view class="flex align-center" @tap="navTo(`/pages/playerhome/playerhome?id=${item.peipei_id}`)">
							<view class="flex align-center ftFF0073">
								<text class="fs-34 font-weight-light">{{item.peipei.price}}</text>
								<image src="/static/imgs/jinbi.png" mode="aspectFill" class="w-28 h-28 mx-1"></image>
							</view>
							<text class="fs-24 text-black letter-spacing ml-1">/ {{$t('hhh.t7')}}</text>
						</view>
						<image src="/static/imgs/like.png" mode="aspectFill" class="w-48 h-48" @tap="cancleLike(item)"></image>
					</view>
				</view>
			</view>
		</block>
		<nodata v-if="dataList.length === 0"></nodata>
		<u-gap height="80" bgColor="transparent"></u-gap>
	</view>
</template>

<script>
	import {
		abbreviateNumber
	} from '@/utils/common.js'
	import HttpApi from '@/api/httpApi';
	import PlayerCard from '@/pages/index/components/card-item.vue'
	export default {
		components: {
			PlayerCard
		},
		data() {
			return {
				scrollTop: 0,
				page: 1,
				tempList: [],
				dataList: [],
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onReachBottom() {
			this.page++
			this.likeList()
		},
		created() {
			this.likeList()
		},
		methods: {
			abbreviateNumber,
			cancleLike(item) {
				HttpApi.removeLike({
					peipei_id: item.peipei_id
				}).then(res => {
					if (res.code === 1) {
						uni.$tools.toast(this.$t('hhh.t112'))
						this.likeList()
					}
				})
			},
			likeList() {
				HttpApi.likeList({
					page: this.page,
					limit: 20
				}).then(res => {
					if (res.code === 1) {
						const list = res.data.data || []
						this.tempList = list
						if (this.page === 1) {
							this.dataList = list
						} else {
							this.dataList = this.dataList.concat(list)
						}
					}
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.favorites-page {
		background-position: center -100px;
	}
</style>